:root {
	
	/* Color palette */
	  
	/* crimson sky */
	--main: #CF6766;  
	--dark_main: #CA6665;
	
	/* indigo */
	--secondary: #30415D;
	
	/* ultramarine */
	--text: #031424;
	
	/* light blue */
	--highlight: #8EAEBD;
	
	/* background gray */
	--background: #E8E8E8;
	
	--header_height: 7vh;
	
	--iconbox_size: 4vh;
	--iconbox_inner_size: 3.05vh;
	
	--border_size: 0.4vh;
	
	--font_size: 3vh;

	--column_padding: 10vw;
	--column_separation: 2vw;
  
	--node_hover_transition: 300ms;
	--node_padding : 2vw;
	
  }
  
  /* General stuff */
  body {
	  display: flex;
	  font-family: 'Roboto Mono', monospace; 
	  font-weight: normal;
	  font-size: var(--font_size);
	  background-color: var(--background);
	  top: 0;
	  left: 0;
  }
  
  /* Header Content */
  header {
	  justify-content: right;
	  display: inline;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  height: var(--header_height);
	  line-height: var(--header_height);
	  background-color: var(--main);
	  z-index: 100;
  }
  
  header * {
	  
	  display: block;
	  width: 100vw;
  }
  
  #Menus ul {
	  
	  width: 100vw;
	  text-align: center;
	  padding-left: 0px;
  }
  
  .menu-toggle{
  
	  position:fixed;
	  top: 0;
	  left: 85vw;
	  width: var(--header_height);
	  height: var(--header_height);
  
  }
  
  .home-button{
  
	position: relative;
	top: 0;
	left: calc(25vw + var(--font_size));
	width: auto;
	padding: 0px;
	text-align: center;
	width: var(--header_height);
	height: var(--header_height);
	text-decoration: none;
	color: var(--text);
  
  }
  
  .menu-toggle img{
  
	  width: var(--header_height);
	  height: var(--header_height);
  
  }
  
  #MenuItems {
  
	  position: relative;
	  display: none;
	  text-decoration: none;
	  color: var(--text);
	  justify-content: left;
	  padding-bottom: calc(var(--header_height) * 0.4);
  
  }
  
  nav {
	  background-color: var(--main);
  }
  
  /* Header menu buttons */
  #Menus li a {
	  
	  text-align: center center;
	  text-decoration: none;
	  background-color: var(--main);
	  border-bottom: var(--border_size) solid var(--main); 
	  transition: border-bottom 300ms, background-color 300ms; 
	  color: var(--text);
  
  }
  
  #Menus li a:hover {
	  background-color: var(--main);
	  border-bottom: var(--border_size) solid var(--text);
	  transition: border-bottom 300ms, background-color 300ms; 
  
  }
  
  #Menus li a.active {
	  background-color: var(--main);
	  border-bottom: var(--border_size) solid var(--text);
	  transition: border-bottom 300ms, background-color 300ms; 
	  
  }
  
  
  /* External icons */
  #Contact {
	  
	  position:relative;
	  
	  display: flex;
	  flex-direction: row;
	  justify-content: space-evenly; 
	  width: 100vw;
	  
	  align-items: center; 
	  text-align: center;
	  background-color: var(--main);
  }
  
  .icon-box {
	  
	  display: flex;
	  justify-content: center; 
	  align-items: center; 
	  text-align: center;
	  
	  height: var(--iconbox_size);
	  width:	var(--iconbox_size);			
	  
	  background-color:var(--main);
	  border: var(--border_size) solid var(--text);
	  position: relative;
	  
	  top: calc(var(--header_height) - (var(--iconbox_size) * 1.4));
	  
	  transition: border 200ms, background-color 200ms;
	  
	  overflow:hidden;
  }
  
  .icon-box:hover {
		  
	  background-color:var(--text);
	  border: var(--border_size) solid var(--text);
	  position: relative;
	  
  }
  
  .icon-img {
	  
	  position:absolute;
	  
	  right: 12%;
	  bottom: 12%;
	  
	  width: var(--iconbox_inner_size);
	  height: var(--iconbox_inner_size);

  }
  
  .icon-box:hover .icon-img-hover {
		  
	  opacity: 0;
  }
  
  
  /* Other Stuff */

/* columns */
.card-display {

	display: grid;
	grid-template-columns: 90vw;
	column-count: 1;
	align-items: center;
	justify-content: center;
	
}


/* Nodes */

.portfolio-node {

	width: auto;
	height: auto;

	display: inline-grid;
	flex-direction: column;

	justify-content: bottom; 
	align-items: center; 
	text-align: bottom;

	border-width: var(--border_size);
	border-color: var(--dark_main);
	border-style: solid;

	background-color: var(--background);

	text-decoration: none;

	padding: var(--node_padding);

	margin: 3vh;
	
	overflow: hidden;

	transition: all var(--node_hover_transition);

}

.portfolio-node.popout {

	transform: translateY(-1.5vh);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: all var(--node_hover_transition);

}

.node-img {

	position: relative;
	left: calc(var(--node_padding) * -1);
	top:  calc(var(--node_padding) * -1);
	width: calc(100% + (var(--node_padding)*2));
	height: 25vh;
	object-fit: cover;
	filter: grayscale(70%);
	transition: all var(--node_hover_transition);

	border-bottom: solid var(--border_size) var(--dark_main);
}

.portfolio-node.popout .node-img {

	filter: grayscale(0%);
	transition: all var(--node_hover_transition);
}

.node-name {

	font-size: calc(var(--font_size) * 1.4);
	color: var(--secondary);
	margin-top: 0.5vh;
	margin-bottom: 0.2vh;

	border-bottom: solid var(--border_size) var(--secondary);
}

.node-description{

	font-size: var(--font_size);
	color: var(--text);
	text-decoration: none;
	margin-top: 2vh;
	margin-bottom: 0.2vh;

}

.node-tag-box {

	margin-top: 3vh;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: start;

}

.node-tag {

	font-size: calc(var(--font_size)/1.3);

	word-wrap: normal;
	height: auto;
	width: auto;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	padding-top: 0.2vh;
	padding-bottom: 0.2vh;

	margin: 0 0.7vw 1vh 0;

	border: solid var(--highlight) calc(var(--border_size)/1.3);
	border-radius: 2em;

	color: var(--highlight);

}